<template>
  <div class="discuss-all" :style="{ height: $store.oj.systemParams.screenHeight * 0.8 + 'px' }">
    <div class="d-header">
      <div class="d-h-title"><i class="iconfont icon-pinglun"></i>讨论管理</div>
    </div>
    <div class="d-search">
      <n-button class="d-s-btn" size="small" type="error" @click="delDiscuss"><i
          class="iconfont icon-shanchu"></i>删除</n-button>
      <n-input class="d-s-input" placeholder="搜索讨论" round size="small" v-model:value="searchVal">
        <template #suffix>
          <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
        </template>
      </n-input>
      <el-select v-model="typeVal" class="d-select" placeholder="讨论状态" style="width: 100px">
        <el-option v-for="item in statusVal" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="d-table">
      <el-table :data="discussList.records" size="small" :row-style="rowState" @selection-change="choiceDiscuss">
        <el-table-column type="selection" width="30" />
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center">
          <template #default="scoped">
            <n-ellipsis style="max-width: 100px">
              {{ scoped.row.title }}
            </n-ellipsis>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="作者" align="center"></el-table-column>
        <el-table-column prop="likeNum" label="喜欢" align="center"></el-table-column>
        <el-table-column prop="viewNum" label="浏览" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scoped">
            <el-select v-model="scoped.row.status" class="m-2" placeholder="Select"
              @change="changeDisableDiscuss(scoped.row)">
              <el-option v-for="item in isShow" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="isTop" label="置顶" align="center">
          <template #default="scoped">
            <el-switch v-model="scoped.row.isTop" :active-value="true" :inactive-value="false"
              @change="topDiscuss(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="d-t-time">
              <div class="time">创建时间：{{ scoped.row.createTime }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scoped">
            <div class="d-t-comparation">
              <n-button class="nbtn" size="tiny" type="success" @click="toDiscussDetail(scoped.row.id)"><i
                  class="iconfont icon-chakan1"></i></n-button>

              <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="deleteDisucss(scoped.row.id)">
                <template #trigger>
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button class="nbtn" size="tiny" type="error"><i class="iconfont icon-shanchu"></i></n-button>
                    </template>
                    删除
                  </n-tooltip>
                </template>
                确认删除讨论？
              </n-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="d-footer">
      <el-pagination small layout="sizes, prev, pager, next" :page-count="parseInt(discussList.pages)"
        v-model:current-page="pageNum" v-model:page-size="pageSize" @current-change="changePage"
        @size-change="changeSize" :page-sizes="[20, 50, 100]" />
    </div>
  </div>
</template>

<script>
import {
  getDiscussAPI,
  topDiscussAPI,
  disableDiscussAPI,
  delDiscussAPI,
} from "@/api/adminAPI/adminAPI"
import { ElMessage } from "element-plus"
export default {
  data () {
    return {
      searchVal: "",
      typeVal: "",
      discussList: {},
      isShow: [
        {
          value: false,
          label: "展示",
        },
        {
          value: true,
          label: "屏蔽",
        },
      ],
      statusVal: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "展示",
        },
        {
          value: "1",
          label: "屏蔽",
        },
      ],
      categoryId: "",
      pageNum: 1,
      pageSize: 20,
      deboundTime: null,
      choiceAllDiscuss: [],
    }
  },
  watch: {
    searchVal () {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI()
      }, 300)
    },
    typeVal () {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI()
      }, 300)
    },
  },
  methods: {
    rowState (row) {
      let style = {}
      switch (row.row.status) {
        case true:
          return (style = {
            backgroundColor: "rgb(235 191 191 / 52%) !important",
          })
      }
      switch (row.row.isTop) {
        case true:
          return (style = {
            backgroundColor: "rgb(206 230 236 / 52%) !important",
          })
      }
    },
    choiceDiscuss (val) {
      this.choiceAllDiscuss = val
    },
    //改变页数，请求分页
    changePage (page) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page
        this.getDiscussAPI()
      }, 300)
    },
    changeSize (size) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageSize = size
        this.getDiscussAPI()
      }, 300)
    },
    //置顶讨论，并做了防抖
    topDiscuss (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.topDiscussAPI(row)
      }, 300)
    },
    changeDisableDiscuss (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.disableDiscussAPI(row)
      }, 300)
    },
    toDiscussDetail (id) {
      this.$router.push({
        path: `/home/discuss-detail/${id}`,
      })
    },
    delDiscuss () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      } else {
        if (this.choiceAllDiscuss.length === 0) {
          ElMessage.error("删除讨论不能为空")
          return
        }
        if (this.deboundTime) {
          clearTimeout(this.deboundTime)
        }
        this.deboundTime = setTimeout(() => {
          this.delDiscussAPI()
        }, 300)
      }
    },
    //单删一个讨论
    deleteDisucss (id) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      } else {
        if (this.deboundTime) {
          clearTimeout(this.deboundTime)
        }
        this.deboundTime = setTimeout(() => {
          this.deleteDiscussAPI(id)
        }, 300)
      }
    },
    //单删讨论
    async deleteDiscussAPI (id) {
      await delDiscussAPI([id]).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("删除成功")
          this.getDiscussAPI()
        }
      })
    },
    async delDiscussAPI () {
      let delId = []
      this.choiceAllDiscuss.forEach((item) => {
        delId.push(item.id)
      })
      await delDiscussAPI(delId).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("删除成功")
          this.getDiscussAPI()
        }
      })
    },
    //封禁讨论
    async disableDiscussAPI (row) {
      const data = new FormData()
      data.append("id", row.id)
      data.append("isDisable", row.status)
      await disableDiscussAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功")
          this.getDiscussAPI()
        }
      })
    },
    async topDiscussAPI (row) {
      await topDiscussAPI(row).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功")
          this.getDiscussAPI()
        }
      })
    },
    //管理员获取讨论
    async getDiscussAPI () {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        like: this.searchVal,
        status: this.typeVal,
      }
      await getDiscussAPI(data)
        .then((res) => {
          if (res.data.code === 200) {
            this.discussList = res.data.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted () {
    if (this.$store.oj.userData.authLevel === 0) {
      ElMessage.error("无此权限")
      return
    } else {
      this.getDiscussAPI()
    }
  },
}
</script>

<style lang="less" scoped>
.discuss-all {
  margin: auto;
  width: 96%;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .d-header {
    display: flex;

    .d-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .d-search {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .d-s-input {
      height: 30px;
      line-height: 30px;
      width: 20%;
    }

    .d-select {
      margin-left: 10px;
    }

    .d-s-btn {
      width: 80px;
      margin: auto 20px;
      border-radius: 15px;
    }
  }

  .d-table {
    height: 92vh;
    width: 100%;
    margin: 10px auto 0 auto;

    .d-t-time {
      display: flex;
      flex-direction: column;

      .time {
        color: black;
      }
    }

    .d-t-comparation {
      display: flex;

      .nbtn {
        margin: auto 2px;
      }
    }
  }

  .d-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}

::v-deep(.el-select .el-input) {
  --el-border-radius-base: 8px;
}
</style>
